<!--
  * @Author: ws
  * @Date: 2023-12-29 16:25:37
  * @email: 458658538@qq.com
  * @LastEditors: ws
  * @LastEditTime: 2024-01-09 15:21:27
  * @Description: 
-->
<template>
  <div :key="refreshKey" class="base-panel">
    <!-- :style="`height: ${r.height}; line-height:  ${r.height}`" -->
    <el-row v-for="(r, index_r) in rows" :key="index_r" v-bind="r.props">
      <template v-if="r.cols.length == 3">
        <!-- :key="index_c" -->
        <template v-for="(c, index_c) in r.cols">
          <!-- :style="`flex:${1};`" -->
          <div
            :key="index_c"
            v-popper="{ content: r.cols[index_c].label }"
            class="label ellipsis w-1/9"
            :class="`label${index_c}`"
          >
            {{ r.cols[index_c].label }}
          </div>
          <!-- :style="`flex:${2}`" -->
          <div :key="index_c" v-popper="{ content: form[r.cols[index_c].key] }" class="value ellipsis w-2/9">
            {{ form[r.cols[index_c].key] }}
          </div>
        </template>
      </template>

      <template v-else-if="r.cols.length == 2">
        <!-- :style="`flex:${1};`" -->
        <!-- :style="`flex:${2}`" -->
        <div v-popper="{ content: r.cols[0].label }" class="label ellipsis w-1/9">
          {{ r.cols[0].label }}
        </div>
        <div v-popper="{ content: form[r.cols[0].key] }" class="value ellipsis w-2/9">
          {{ form[r.cols[0].key] }}
        </div>
        <!--
          :style="`flex:${1};`"
          :style="`flex:${5}`" 
        -->
        <div v-popper="{ content: r.cols[1].label }" class="label label2 ellipsis w-1/9">
          {{ r.cols[1].label }}
        </div>
        <div v-popper="{ content: form[r.cols[1].key] }" class="value ellipsis w-5/9">
          {{ form[r.cols[1].key] }}
        </div>
      </template>
      <template v-else>
        <div class="label flex w-1/9 items-center justify-end">
          <span v-popper="{ content: r.cols[0].label }" class="ellipsis">
            {{ r.cols[0].label }}
          </span>
        </div>
        <!-- :style="`flex:${1};`" -->
        <!-- :style="`flex:${8};`" -->
        <div v-popper="{ content: form[r.cols[0].key], width: 500 }" class="value w-8/9" :class="r.cols[0].class">
          {{ form[r.cols[0].key] }}
        </div>
      </template>
      <!-- <el-col v-for="(c, index_c) in r.cols" :key="index_c" v-bind="c.props" :span="c.hidden ? 0 : c.span || 8"> -->
      <!--
        <div class="label"></div>
        <div class="value"></div> 
      -->
      <!-- </el-col> -->
    </el-row>
  </div>
</template>

<script>
export default {
  name: "BasePanel",
  props: {
    rows: { type: Array, default: () => [] },
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      refreshKey: 0,
    };
  },
  watch: {
    form() {
      this.refreshKey++;
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.base-panel {
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 40px;
  color: #515a6e;
  border: 1px solid #e8eaef;

  .el-row {
    // background: lightblue;
    display: flex;
    // height: 40px;
    box-sizing: border-box;

    .label {
      padding: 0 10px;
      font-weight: 400;
      // background: lightsalmon;
      // color: #515a6e;
      color: #909399;
      text-align: right;
      // color: red;
      background: #fafbfc;
      box-sizing: border-box;
    }

    .value {
      padding: 0 10px;
      // padding-left: 10px;
      text-align: left;
      box-sizing: border-box;
      // background: lightyellow;
    }

    .label + .value,
    .label2,
    .label1 {
      border-left: 1px solid #e8eaef;
    }
    // .value + .label {
    //   border-right: 1px solid #e8eaef;
    // }

    & + .el-row {
      border-top: 1px solid #e8eaef;
    }
  }
}
</style>
